<template>
  <div class="role">
    <!-- 查询表单 start -->
    <ui-form class="query-form" :model="form">
      <ui-form-item label="角色名称">
        <ui-input type="text" placeholder="请输入关键字查询" v-model="form.searchName"> </ui-input>
      </ui-form-item>
      <ui-form-item>
        <ui-button class="primary-btn" @click="searchList" icon="ui-icon-search">查询</ui-button>
        <ui-button class="default-btn" @click="reset" icon="ui-icon-refresh-right">重置</ui-button>
      </ui-form-item>
    </ui-form>
    <ui-button
      class="primary-btn mg-bt-20"
      @click="
        $router.push({
          path: '/system/role/add/add-pre',
        })
      "
      icon="ui-icon-plus"
      >添加角色</ui-button
    >
    <!-- 查询表单 end -->
    <!-- 查询信息结果 start -->
    <vx-nodata :list="tableList" v-loading="isLoading" sub-title="暂无数据">
      <ui-table :data="tableList">
        <ui-table-column label="角色编号" prop="id"> </ui-table-column>
        <ui-table-column prop="name" label="角色名称"> </ui-table-column>
        <ui-table-column label="角色类型">
          <template v-slot="scope"> {{ $msg('usertypeDict')[scope.row.type] }}</template>
        </ui-table-column>
        <ui-table-column label="操作">
          <template v-slot="scope">
            <ui-button type="text" icon="ui-icon-tickets" @click="roleDetail(scope.row.id)">详情</ui-button>
            <ui-button icon="ui-icon-delete" class="mg-lt-10" type="text" @click="roleRemove(scope.row.id)">删除</ui-button>
          </template>
        </ui-table-column>
      </ui-table>
      <ui-pagination
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        :layout="layout"
        :page-sizes="pageSizeList"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </ui-pagination>
    </vx-nodata>
  </div>
</template>

<script>
import pagination from '@/common/mixin/pagination.js'; // 混入/分页
import roleApi from '@/api/role.js';

export default {
  name: 'role-index',
  mixins: [pagination],
  data() {
    return {
      form: {
        name: '', //name:角色名称
      },
      tableList: [], //列表数据
      autoClose: true, //控制彈框顯示
      isLoading: false, //查询列表loading
      dialogError: '', // 报错信息
      layout: 'prev, pager, next, total',
    };
  },
  watch: {
    /**
     * 监听表单项中的name 是不是空值
     * 是点击确定时候弹窗不会关闭
     * 否则关闭
     */
    'form.name': {
      handler(newVal) {
        if (newVal !== '') {
          this.autoClose = false;
        } else {
          this.autoClose = true;
        }
      },
    },
    'form.FormAmend': {
      handler(newVal) {
        if (newVal !== '') {
          this.autoClose = false;
        } else {
          this.autoClose = true;
        }
      },
    },
  },
  created() {
    /**
     * 查询列表数据
     */
    this.searchList();
  },

  methods: {
    /**
     * 跳转详情
     */
    async roleDetail(id) {
      try {
        const res = await roleApi.roleDetail({
          id: id,
        });
        this.setData(res.data);
        this.$router.push({
          path: '/system/role/role-detail/role-detail-index',
        });
      } catch (error) {
        console.log(error.message);
      }
    },
    /**
     * 查询列表
     */
    async searchList() {
      try {
        this.isLoading = true;
        const res = await roleApi.roleListPage({ name: this.form.searchName, pageSize: this.pageSize, pageNum: this.currentPage });
        this.tableList = res.data.list;
      } finally {
        this.isLoading = false;
      }
    },
    /**
     *  确定删除角色
     * id 选中 id
     */
    async roleRemove(id) {
      this.$confirm('确定删除该角色吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        const res = await roleApi.roleRemove({ ids: id });
        this.$message.success(res.msg);
        this.searchList();
      });
    },
    /**
     * 重置
     */
    reset() {
      this.form = {};
      this.searchList();
    },
  },
};
</script>

<style lang="scss">
.role {
  .ui-icon-plus,
  .ui-icon-search {
    color: #fff;
  }
}
</style>
